<script lang="ts" setup>
import { ref } from 'vue';

import { MdiCategorize, MdiDelete, MdiSelected } from '@vben/icons';

import { Button, Cascader, message } from 'ant-design-vue';

import { batchUpdate, deleteImage, recommendImage } from '#/api';

interface CategoryList {
  id: number;
  name: string;
  num: number;
  categoryTowListResp: { id: number; name: string }[];
}
const props = defineProps({
  // 选中的id
  selectedImageId: {
    type: Array<number | string>,
    default: () => [],
  },
  categoryList: {
    type: Array as () => CategoryList[],
    default: () => [],
  },
});

const emit = defineEmits(['edit', 'upDataList']);

// 分类信息
const category = ref<string[]>([]);

// 事件类型
const eventTypes = ref<string>('');
// 操作事件
const handleChange = (type: string) => {
  eventTypes.value = type;
  category.value = [];
  emit('edit', !!type, type);
};

// 设置分类
const handleCategory = async () => {
  try {
    await batchUpdate({
      idList: props.selectedImageId || [],
      oneCategoryId: category.value[0] || '',
      twoCategoryId: category.value[1] || '',
    });
    handleChange('');
    emit('upDataList');
    message.success('操作成功');
  } catch (error) {
    console.error('删除失败：', error);
  }
};

// 设置精选
const handleSelected = async () => {
  try {
    await recommendImage({
      idList: props.selectedImageId || [],
    });
    handleChange('');
    emit('upDataList');
    message.success('操作成功');
  } catch (error) {
    console.error('删除失败：', error);
  }
};

// 删除事件
const handleDelete = async () => {
  try {
    await deleteImage({
      idList: props.selectedImageId || [],
    });
    handleChange('');
    emit('upDataList');
    message.success('操作成功');
  } catch (error) {
    console.error('删除失败：', error);
  }
};
</script>

<template>
  <div class="card-box sticky top-[-21px] z-[100] mb-3 rounded-md p-4">
    <div v-if="eventTypes === ''" class="flex items-center">
      <Button
        class="text-primary mr-3 flex h-auto items-center py-2"
        @click="handleChange('edit')"
      >
        <template #icon>
          <MdiCategorize class="text-primary mr-1 text-base" />
        </template>
        改分类
      </Button>
      <Button
        class="text-primary mr-3 flex h-auto items-center py-2"
        @click="handleChange('selected')"
      >
        <template #icon>
          <MdiSelected class="text-primary mr-1 text-base" />
        </template>
        设置精选
      </Button>
      <Button
        class="text-primary mr-3 flex h-auto items-center py-2"
        @click="handleChange('delete')"
      >
        <template #icon>
          <MdiDelete class="text-primary mr-1 text-base" />
        </template>
        删除
      </Button>
    </div>
    <div v-else class="flex items-center">
      <div class="mr-6">
        <p>
          当前已选：<span class="text-red-500">{{
            selectedImageId.length || 0
          }}</span>
        </p>
        <p v-if="eventTypes === 'selected'" class="text-xs text-gray-500">
          如果精选图片为0张，则首页不显示轮播图。
        </p>
      </div>
      <Cascader
        v-if="eventTypes === 'edit'"
        v-model:value="category"
        :field-names="{
          label: 'name',
          value: 'id',
          children: 'categoryTowListResp',
        }"
        :options="categoryList"
        class="mr-3 text-sm"
        expand-trigger="hover"
        placeholder="设置所选图的目标分类"
        size="large"
        style="width: 260px"
      />
      <Button
        class="text-primary mr-3 flex h-auto items-center py-2"
        @click="handleChange('')"
      >
        取消
      </Button>
      <Button
        v-if="eventTypes === 'edit'"
        :disabled="selectedImageId.length === 0 && category.length > 0"
        class="mr-3 flex h-auto items-center py-2"
        type="primary"
        @click="handleCategory"
      >
        确认
      </Button>
      <Button
        v-if="eventTypes === 'selected'"
        class="mr-3 flex h-auto items-center py-2"
        type="primary"
        @click="handleSelected"
      >
        确认
      </Button>
      <Button
        v-if="eventTypes === 'delete'"
        :disabled="selectedImageId.length === 0"
        class="mr-4 flex h-auto items-center py-2"
        type="primary"
        @click="handleDelete"
      >
        确认
      </Button>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.text-primary {
  color: hsl(var(--card-foreground));
}

:deep(.ant-btn:hover .text-primary) {
  color: hsl(var(--primary));
}

:deep(.ant-select-selection-placeholder) {
  font-size: 14px !important;
}

:deep(.ant-select-selection-item) {
  font-size: 14px !important;
}
</style>
